<template>
  <div class="iconContainer">
    <ul @click="backHome">
      <li class="iconImgli">
        <div class="iconImgWrapper">
          <img class="iconImg" src="@/assets/icon.png" width="20" height="20"/>
        </div>
      </li>
      <li class="titleli">
        <div class="title">网易云音乐</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Icon",
  methods:{
    backHome(){
      console.log("主页")
    }
  }
}
</script>

<style scoped>
  .iconContainer{
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;

  }
  .iconContainer ul{
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    height: 100%;
  }
  .iconContainer ul li{
    float: left;
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 100%;
    line-height: 1.5rem;
    /*border: 1px red solid;*/
  }

  .iconImgli{
    width: 33%;
    position: relative;
  }
  .iconImgWrapper{
    /*border: 1px red solid;*/
    height: 2rem;
    width: 2rem;
    border-radius: 2rem;
    background-color: white;
    margin: 2px;
    position: absolute;
    right: 0;
  }
  .iconImg{
    display: inline-block;
    padding-top: 15%;
  }

  .titleli{
    width: 60%;
    height: 2rem;
  }
  .title{
    display: inline-block;
    padding-top: 5%;
    color: white;
    font-family: 黑体;
    font-size: 15px;
  }
</style>
